$(document).ready(function() {
	showOrHide()
	moveLeft()
})

/**
 * 初始化按钮隐藏
 */
function showOrHide() {
	// 对div设置鼠标移入事件、鼠标移出事件
	$('#banner')
	.mouseover(function() {
		$('#icoList p').show()
		$('#banner>p').show()
	})
	.mouseout(function() {
		$('#icoList p').hide()
		$('#banner>p').hide()
	})
	.mouseout() // 触发鼠标移出事件
}

var left = 0
var time = 10

/* 往左移动 */
function moveLeft() {
	/* 0 ~ -3600：0，-900，-1800，-2700，-3600 */
	/* 在-2700 ~ -3600区间，在滚动第4张图片 */
	if(left <= -3600) {
		// left归零最好放置在代码最上方
		left = 0
	}
	$('#imgList').css('margin-left', left + 'px')
	/* 根据left计算当前在滚动第几张 */
	var index = Math.floor(-left / 900) + 1
	/* 切换图标 */
	changeIco(index)
	/* 选择一个延迟的时间，整张图片时停顿 */
	time = left % 900 === 0 ? 2000 : 10
	/* 必须放在判断整张图片之后 */
	left -= 10 // 必须要被900能整除
	setTimeout(moveLeft, time)
}

/**
 * 切换图片
 * @param {Object} i 1-4
 */
function changeImg(i) {
	left = -900 * (i - 1)
	$('#imgList').css('margin-left', left + 'px')
	changeIco(i)
}

/**
 * 切换图标
 * @param {Object} i 1-4
 */
function changeIco(i) {
	$('#icoList p')
		.css('background-color', 'rgba(0, 0, 0, 0.5)')
		.eq(i - 1).css('background-color', '#F00')
}

function prev() {
	/* 根据left计算当前在滚动第几张 */
	var index = Math.floor(-left / 900) + 1
	/* 计算前一张 */
	var prev = index - 1
	if (prev === 0) {
		prev = 4
	}
	changeImg(prev)
}

function next() {
	/* 根据left计算当前在滚动第几张 */
	var index = Math.floor(-left / 900) + 1
	/* 计算后一张 */
	var next = index + 1
	if (next === 5) {
		next = 1
	}
	changeImg(next)
}